<template>
	<view class="container">
		<view class="top-box">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="(item,index) in detail_list.img_list">
								<image :src="item.url" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
		</view>
		<view>{{testLocation}}-----888888888</view>
		<view class="content">
			<view class="big-box">
				<view class="info-box">
					<view class="list" @tap="toDe">
						<view class="title-box">
							<view class="tit-l">{{detail_list.recruit_job_title}}</view>
							<view class="tit-r">{{detail_list.recruit_job_name}}</view>
						</view>
						<view class="money">{{salary_min}}-{{salary_max}}/月</view>
						<view class="flex flex-wrap">
							<view class="tag" v-for="(tag, index) in tag" :key="index">
								<view class="cu-tag light radius line-gray">
									{{ tag.tag_name || ''}}
								</view>
							</view>
						</view>
						<view class="address-box">
							<view class="address">
								{{address}}
							</view>
						</view>
					</view>
				</view>
				<view class="conpany-box">
					<view class="head-box">
						<image :src="detail_list.admin_info.avatar" alt="">
					</view>
					<view class="com">
						<view class="name">
							{{detail_list.company_info.recruit_company_name}}
						</view>
						<view class="type">
							{{detail_list.admin_info.admin_name |select_name}}
						</view>
					</view>
					<view class="img-box">
						<view class="call" @tap="$refs.callpopup.open()">
							<image src="../../static/img/detail/call.png" alt="">
						</view>
						<!-- <view class="wx" @tap="$refs.wxpopup.open()">
							<image src="../../static/img/detail/wx.png" alt="">
						</view> -->
					</view>
				</view>
				<view class="info-content">
					<view class="big-list,box" v-for="(item,key,index) in detail_list.expand_list" :key="index">
						<view class="tit-box">
							<image src="../../static/img/detail/money.png" alt="">
								<view class="title">
									{{key}}
									<!-- {{  (Object.keys(detail_list.expand_list)).index }} -->
									<!-- <view>{{detail_list.expand_list[index][indexs]}}</view> -->
								</view>
						</view>
						<view class="type-name" v-for="(items,keys,indexs) in Object.keys(item)" :key="indexs">
							<view class="type-name_head">
								<view class="dian">
								
								</view>
								<view class="title-d">
									{{Object.keys(item)[keys]}} 
									<!-- items -->
								</view>
							</view>
							<view class="content-box" v-for="(itemss,keyss,indexss) in item[items]" :key="indexss" >
								{{ itemss.recruit_job_expand_title}}
								<!-- 试用期综合薪资5000-6000元/月，试用期后综合薪资6000-8000元/月;按国家劳动法规定按期缴纳五险一金。 -->
							</view>
						</view>
					</view>

					<view class="box,desc_box" v-if="showText">

						<view class="tit-box">
							<image src="../../static/img/detail/prom.png" alt="">
							<view class="title">企业介绍</view>
						</view>
						<view class="type-name">
							<view class="type-name_head">
								<view class="dian"></view>
								<view class="title-d">企业名称</view>
							</view>
							<view class="content-box">
								{{detail_list.company_info.recruit_company_name}}
							</view>
						</view>
						<view class="type-name">
							<view class="type-name_head">
								<view class="dian"></view>
								<view class="title-d">企业性质</view>
							</view>
							<view class="content-box">
								{{detail_list.company_info.recruit_company_type}}
							</view>
						</view>
						<view class="type-name">
							<view class="type-name_head">
								<view class="dian"></view>
								<view class="title-d">企业规模</view>
							</view>
							<view class="content-box">
								{{detail_list.company_info.recruit_company_size}}
							</view>
						</view>
						<view class="type-name">
							<view class="type-name_head">
								<view class="dian"></view>
								<view class="title-d">生产产品</view>
							</view>
							<view class="content-box">
								{{detail_list.company_info.recruit_company_product}}
							</view>
						</view>
						<view class="type-name">
							<view class="type-name_head">
								<view class="dian"></view>
								<view class="title-d">企业简介</view>
							</view>
							<view class="content-box">
								{{detail_list.company_info.recruit_company_desc}}
							</view>
						</view>
					</view>
					<view @click="toggleDescription" class="open" v-if="!showText">
						<text>展开</text>
						<image src="../../static/img/index/zhankai.png" mode=""></image>
					</view>
					<view @click="toggleDescription" class="open" v-else>
						<text>收起</text>
						<image src="../../static/img/index/shouqi.png" mode=""></image>
					</view>
					<view class="box">
						<view class="tit-box">
							<image src="../../static/img/detail/prom.png" alt="">
								<view class="title">报名流程</view>
						</view>
						<view class="pro-box">
							<image src="../../static/img/detail/pro.png" mode=""></image>
						</view>
					</view>

				</view>
			</view>

		</view>
		
		<view class="btn-box">
			<view class="inv-box" @tap="$refs.sharepopup.open()">
				<image src="../../static/img/detail/share.png" mode=""></image>
				<view class="">
					分享好友
				</view>
			</view>
			<view v-if="!detail_list.is_sign">
				<button class="btn" v-if="mobilephone" @tap="baoming">
					立即报名
				</button>
				<button class="btn" v-else="!mobilephone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					立即报名
				</button>
			</view>
			<view v-if="detail_list.is_sign">
				<button class="btn" style="background-color: #CCCCCC;">
					已报名
				</button>
			</view>
		</view>
		<view v-if="showposter">
			<poster />
		</view>
		<uni-popup :show="false" type="bottom" ref="callpopup" :maskClick="false">
			<view class="callPhone" style="background-color: #F1F1F1;">
				<view @tap="call_phone">{{detail_list.admin_info.mobile}}</view>
				<view @tap="$refs.callpopup.close()">取消</view>
			</view>
		</uni-popup>
		<uni-popup :show="false" type="center" ref="wxpopup" :maskClick="false">
			<view class="wx_popup">
				<view>
					<image src="../../static/img/mine_invite/wx.png" mode=""></image>
				</view>
				<view style="font-size: 17px;color: #000000;line-height: 24px;">微信号:123456</view>
				<view style="font-size: 15px;color: #666666;line-height: 21px;margin-top: 12px;margin-bottom: 32px;">已复制，去添加经纪人为好友吧</view>
				<view class="wx_btn" @tap="getwxid">我知道了</view>
			</view>
		</uni-popup>
		<uni-popup :show="false" type="bottom" ref="sharepopup" :maskClick="false">
			<view class="share_popup">
				<view style="height: 166px;background-color: #FFFFFF;width: 100%;padding: 16px;">
					<button open-type="share">
						<image src="../../static/img/mine_invite/wx.png" mode=""></image>
						<view style="font-size: 17px;color: #333333;margin-left: 20px;">分享给微信好友</view>
					</button>
					<view style="display: flex;">
						<image src="../../static/img/mine_invite/wx.png" mode=""></image>
						<view style="display: flex;flex-direction: column;justify-content: space-around;margin-left: 20px;" @click="get_posters">
							<view style="font-size: 17px;color: #333333;">生成海报</view>
							<view style="font-size: 13px;color: #999999;">可将生成的海报发到任何社交圈子</view>
						</view>
					</view>
				</view>
				<view class="share_btn" @tap="$refs.sharepopup.close()">取消</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import poster from "./components/poster.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		job_details,
		getWhiteDetail,
		getphone,
		operatingrecord
	} from "@/api/user.js"
	export default {
		components: {
			poster,
			'uni-popup': uniPopup
		},
		data() {
			return {
				tag: [],
				showText: false,
				detail_list: {admin_info:{
					admin_name:''
				}},
				salary_max: "",
				salary_min:"",
				address: "",
				recruit_job_id: "",
				mobilephone: false,
				phoneParams: {
					encrypdata: "",
					ivdata: ""
				},
				arr: [],
				urlShare:"",
				datadetail: {},
				showposter: false,
				user_id: 0,
				hasToken: false,
				isShare: '',
				img_list:[],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				testLocation:""
			}
		},
		methods: {
			...mapMutations(["phone", "encrypdata", "iv"]),
			todet() {
				let scene = `${this.user_id}&${this.recruit_job_id}`
				uni.navigateTo({
					url: `/pages/detail/detail?scene=${encodeURIComponent(scene)}`
				})
			},
			get_posters() {
				this.detail_list["recruit_job_id"] = this.recruit_job_id
				var event = JSON.stringify(this.detail_list)
				uni.navigateTo({
					url: `/pages/poster/poster?data=${encodeURIComponent(event)} `
				})
			},
			toJSON() {
				return this
			},
			toggleDescription(num) {
				this.showText = !this.showText
			},
			apply(data) {
				console.log(data)
				getphone(data).then(res => {
					if (res.code == 20000) {
						if (!this.mobilephone) {
							this.phone({
								mobilephone: res.mobile,
								cb: () => {}
							});
						}
						this.detail_list.is_sign = true
						uni.showToast({
							title: '报名成功',
							duration: 2000
						})
						setTimeout(res => {
							if (this.isShare) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}, 1000);

					}

				})
			},
			//报名
			baoming() {
				if (uni.getStorageSync('authorization')) {
					let data = {
						recruit_job_id: Number(this.recruit_job_id),
						encrypted_data: uni.getStorageSync("encrypdata").encrypdata,
						iv: uni.getStorageSync("iv").iv,
						invite_user_id: Number(this.user_id)
					}
					this.apply(data)
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '请先登录再查看职位详情！',
						confirmText: '登录',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: `/pages/login/index?id=${this.recruit_job_id}`
								});
							}
						}
					})
				}

			},
			getwxid() {
				operatingrecord({
					operation: "用户复制了经纪人微信"
				}).then(res => {
					console.log(res)
				})
				this.$refs.wxpopup.close()
			},
			//获取手机号
			getPhoneNumber(e) {
				this.encrypdata({
					encrypdata: e.detail.encryptedData,
					cb: () => {}
				});
				this.iv({
					iv: e.detail.iv,
					cb: () => {}
				});
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let data = {
						recruit_job_id: Number(this.recruit_job_id),
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv,
						invite_user_id: Number(this.user_id)
					}
					this.apply(data)
				}


			},
			call_phone() {
				operatingrecord({
					operation: "用户点击了经纪人联系电话"
				}).then(res => {
					console.log(res)
				})
				uni.makePhoneCall({
					phoneNumber: this.detail_list.admin_info.mobile,
					success: (res) => {
						console.log('调用成功!')
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});

			}
		},
		onLoad(options) {
			if (options.scene) {
				this.isShare = true
				this.user_id = JSON.parse(decodeURIComponent(options.scene).user_id)
				this.recruit_job_id = JSON.parse(decodeURIComponent(options.scene).job_id)
				this.testLocation =JSON.parse(decodeURIComponent(options.scene).job_id)
				if (this.hasToken) {
					job_details({
						recruit_job_id: Number(this.recruit_job_id)
					}).then(res => {
						this.detail_list = res.data
						this.arr = Object.keys(this.detail_list.expand_list)
						this.tag = res.data.tag_list
						this.salary_min = res.data.salary_min
						this.salary_max = res.data.salary_max
						this.address = res.data.company_info.city_address
					})
				} else {
					getWhiteDetail({
						recruit_job_id: Number(this.recruit_job_id)
					}).then(res => {
						this.detail_list = res.data
						console.log(this.detail_list,2222)
						this.arr = Object.keys(this.detail_list.expand_list)
						this.tag = res.data.tag_list
						this.salary_min = res.data.salary_min
						this.salary_max = res.data.salary_max
						this.address = res.data.company_info.city_address
					})
				}

			}
			if (uni.getStorageSync("phone").mobilephone) {
				this.mobilephone = true
			} else {
				this.mobilephone = false
			}
			// console.log(data.recruit_job_id,1200)
			// // this.recruit_job_id = options.recruit_job_id
			// wx.showShareMenu({
			// 	withShareTicket: true,
			// 	//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			// 	menus: ["shareAppMessage", "shareTimeline"]
			// })
			// console.log(options.recruit_job_id)
		},
		//分享给好友
		// onShareAppMessage(res) {
		
		// 	let scene = `${this.detail_list.recruit_user_id}&${this.recruit_job_id}`
		// 	// let scene = {
		// 	// 	recruit_user_id:this.detail_list.recruit_user_id,
		// 	// 	recruit_job_id:this.recruit_job_id
		// 	// };
		// 	if (res.from === 'button') { // 来自页面内分享按钮
		// 		console.log(res.target)
		// 	}
			
		// 	if (this.detail_list.img_list && this.detail_list.img_list.length != 0) {
		// 		this.urlShare = this.detail_list.img_list[0].url;
		// 	}
		// 	return {
		// 		title: this.detail_list.recruit_job_title,
		// 		desc: "分享",
		// 		type: 1,
		// 		imageUrl: this.urlShare,
		// 		path: '/pages/detail/detail?scene=' + encodeURIComponent(scene),
		// 		success: res => {
		// 			console.log(res)
		// 		},
		// 		fail: err => {
		// 			console.log(err,6666)
		// 		}

		// 	}
		// },
		// onShareTimeline(res) {
		// 	// console.log(222, scene)
		// 	let distSource = uni.getStorageSync('distSource');
		// 	if (distSource) {
		// 		return {
		// 			title: this.detail_list.recruit_job_title,
		// 			desc: "分享",
		// 			type: 1,
		// 			imageUrl: this.urlShare,
		// 			path: '/pages/detail/detail?scene=' + encodeURIComponent(scene),
		// 			success: res => {
		// 				console.log(res)
		// 			},
		// 			fail: err => {
		// 				console.log(err)
		// 			}
		// 		}
		// 	}
		// },
		filters:{
			select_name(val){
				if(val){
					return val = val.slice(0,1) + "经理"
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.content {}
	swiper {
		width: 100%;
		height: 160px;
	}
	
	swiper-item {
		width: 100%;
		height: 160px;
	}
	
	swiper-item image {
		width: 100%;
		height: 100%;
	}
	.top-img {
		height: 160px;
		width: 100%;
		background-color: #CCCCCC;
	}

	.big-box {
		padding: 0 16px;
		position: relative;
	}

	.info-box {
		width: 100%;
		height: 155px;
		background: #FFFFFF;
		/* box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); */
		padding-top: 12px;
	}

	.info-box view:not(:last-child) {
		margin-bottom: 5px;
	}

	.flex-wrap {
		padding: 5px 0px;
		border-bottom: 1px solid #EEEEEE;
	}

	.flex-wrap view {
		margin-right: 5px;
		font-size: 12px;
	}

	.tagstyle {
		height: 18px;
		border-radius: 4px;
		/* border:1px solid rgba(232,232,232,1); */
	}

	.cu-tag {
		background-color: #F5F5F5;
	}

	.cu-tag::after {
		border: none !important;
	}

	.title-box {
		display: flex;
	}

	.tit-l {
		color: #444444;
		font-size: 17px;
		font-weight: blod;
	}

	.tit-r {
		margin-left: auto;
		font-size: 15px;
		color: #999999;
	}

	.money {
		color: #07C160;
		font-size: 15px;
		font-weight: blod;
	}

	.address-box {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999999;
		padding-top: 10px;
	}

	.line {
		width: 2px;
		height: 10px;
		background-color: #DDDDDD;
		margin-left: 10px;
	}

	.company {
		margin-left: 10px;
		font-size: 13px;
		color: #999999;
	}

	.head-box image {
		border-radius: 50%;
		width: 52px;
		height: 52px;
		background-color: #CCCCCC;
	}

	.conpany-box {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 24px;

	}

	.com {
		margin-left: 14px;
	}

	.name {
		color: #333333;
		font-size: 15px;
		font-weight: blod;
	}

	.type {
		font-size: 13px;
		color: #666666;
		padding-top: 4px;
	}

	.call {
		/* margin-right: 20px; */
	}

	.img-box {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.call image,
	.wx image {
		width: 32px;
		height: 32px;
	}

	.tit-box image {
		width: 16px;
		height: 16px;
	}

	.tit-box {
		display: flex;
		align-items: center;
	}

	.info-content {
		padding-top: 15px;
	}

	.tit-box .title {
		font-size: 17px;
		font-weight: bold;
		color: #333333;
		margin-left: 12px;
	}

	.type-name {
	/* 	display: flex;
		align-items: center; */
		margin-top: 12px;
	}
	.type-name_head {
		display: flex;
		align-items: center;
	}

	.dian {
		width: 4px;
		height: 4px;
		background: #28DB8E;
		opacity: 1;
	}

	.title-d {
		padding-left: 5px;
		color: #999999;
	}

	.content-box {
		padding-top: 12px;
		font-size: 15px;
		font-weight: 400;
		color: #333333;

	}

	.desc_box .content-box {
		padding-top: 0px;
	}

	.pro-box {
		width: 100%;
		margin: 0 auto;
		height: 195px;
		position: absolute;
		left: 0;
	}

	.pro-box image {
		width: 425px;
		height: 100px;
		display: block;
		margin: 0 auto;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 74px;
		display: flex;
		border-top: 1px solid #EEEEEE;
		padding: 0 16px;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.inv-box image {
		width: 24px;
		height: 24px;
		display: block;
		margin: 0 auto;
	}

	.inv-box view {
		padding-top: 4px;
		color: #666666;
	}

	.btn {
		width: 250px;
		height: 50px;
		background: #0AC770;
		opacity: 1;
		border-radius: 25px;
		color: #FFFFFF;
		line-height: 50px;
		text-align: center;
		font-size: 17px;
		margin-left: 10px;
	}

	.box {
		margin-bottom: 20px;
	}

	.open {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.open text {
		font-size: 14px;
		width: 30px;
	}

	.open image {
		width: 10px;
		height: 5px;

	}

	.callPhone {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 118px;
		font-size: 18px;
		text-align: center;
		border-radius: 10px 10px 0 0;
		overflow: hidden;
	}

	.callPhone view {

		height: 55px;
		width: 100%;
		background-color: #FFFFFF;
		line-height: 55px;
	}

	.wx_popup {
		width: 300px;
		/* height: 300px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 8px;

	}

	.wx_popup image {
		width: 50px;
		height: 50px;
		margin-top: -25px;
	}

	.wx_btn {
		width: 85%;
		height: 50px;
		background: #0AC770;
		opacity: 1;
		border-radius: 25px;
		color: #FFFFFF;
		font-size: 17px;
		text-align: center;
		line-height: 50px;
		margin-bottom: 32px;
	}

	.share_popup {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 228px;
		background: #F1F1F1;
		opacity: 1;
		border-radius: 16px 16px 0px 0px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

	}

	.share_popup image {
		width: 50px;
		height: 50px;
	}

	.share_popup image {
		width: 50px;
		height: 50px;
	}

	.share_popup button::after {
		border: none;
	}

	.share_popup button {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		line-height: 1.35;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
	}

	.share_popup .share_btn {
		height: 56px;
		width: 100%;
		background: #FFFFFF;
		opacity: 1;
		font-size: 17px;
		text-align: center;
		line-height: 56px;
	}
</style>
